
<template>
  <div>
    <div class="container">
      <div class="col-md-10 col-md-offset-1">
        <div class="page-header">
          <div>员工子账号管理</div>
        </div>
        <div class="row">
          根据员工的职能选择角色并为其分组，新增该角色下的员工账号
        </div>
        <a-tabs :defaultActiveKey="tabNum" @change="callback">
          <a-tab-pane tab="部门架构" key="1">
            <div class="text-center" >
              <vue2-org-tree name="test"
                :data="data2"
                :label-class-name="labelClassName"
                :render-content="renderContent"
                @on-expand="onExpand"
                @on-node-click="onNodeClick"
                style="width:100%;background:none"
              />
            </div>
          </a-tab-pane>
          <a-tab-pane tab="角色管理" key="2" forceRender>
            <!-- 角色管理按钮组 -->
            <div>
              <a-button @click="showModal">新增角色</a-button>
              <a-button style="margin-left:10px;">查看/修改权限</a-button>
            </div>
            <!-- 角色列表 -->
            <a-radio-group @change="onChange" v-model="value">
              <div style="border:1px solid red;position:relative">
                <a-radio :value="1">
                  <div>ceshi</div>
                  <div>1222</div>
                </a-radio>

              </div>
              <a-radio :value="2">B</a-radio>
              <a-radio :value="3">C</a-radio>
              <a-radio :value="4">D</a-radio>
            </a-radio-group>
            <a-list
              :grid="{ gutter: 16, column: 4 }"
              :dataSource="data1"
              style="margin-top:10px;"
            >
              <!-- 列表元素 -->
              <a-list-item slot="renderItem" slot-scope="item">
                <!-- 卡片 -->
                <a-card>
                  <a-card-meta :description="item.desc">
                    <!-- 卡片内容 -->
                    <template slot="title">
                      <div class="card-info">
                        <div>{{item.title}}</div>
                        <div><a-radio :value="item.id"></a-radio></div>
                      </div>
                    </template>
                  </a-card-meta>
                </a-card>
              </a-list-item>
            </a-list>
          </a-tab-pane>
          <a-tab-pane tab="员工列表" key="3">
            <role-list :cashierPList="cashier_list"/>
          </a-tab-pane>
        </a-tabs>
        
      </div>
    </div>
    <!-- 部门架构部分 -->
    <settingDrawer :isDrawer="isDrawer" @upDrawer="getIsDrawer"/>
    <!-- 新增角色弹窗 -->
    <a-modal
      title="角色信息及权限"
      v-model="isAddRole"
      @ok="handleOk"
      cancelText="取消"
      okText="确定"
      width="800px"
    >
      <!-- 新增角色组件 -->
      <add-role />
    </a-modal>
  </div>
</template>
<script>
import SettingDrawer from '@/components/SettingDrawer'
import AddRole from './components/AddRole'
import RoleList from './components/RoleList'
import { apiCashierList, apiGroupList, apiRoleList } from '@/utils/api'
export default {
  components: {
    SettingDrawer,
    AddRole,
    RoleList
  },
  data() {
    return {
      token: '',
      // 抽屉打开状态
      isDrawer: false,
      // 新增部门弹窗
      isAddRole: false,
      // tab切换默认为1
      tabNum: sessionStorage.getItem('tabNum')? sessionStorage.getItem('tabNum') : '1',
      // 收银员列表
      cashier_list: [],
      // 部门列表对象
      data2: {},
      // 角色列表
      data1: [],
      // data1 : [
      //   {
      //     id: 1,
      //     title: '公司负责人',
      //     desc:'该角色为公司负责人，代表企业在x平台全权管理'
      //   },
      //   {
      //     id: 2,
      //     title: '公司负责人',
      //     desc:'该角色为公司负责人，代表企业在x平台全权管理'
      //   },
      //   {
      //     id: 3,
      //     title: '公司负责人',
      //     desc:'该角色为公司负责人，代表企业在x平台全权管理'
      //   },
      //   {
      //     id: 4,
      //     title: '公司负责人',
      //     desc:'该角色为公司负责人，代表企业在x平台全权管理'
      //   },
      //   {
      //     id: 5,
      //     title: '公司负责人',
      //     desc:'该角色为公司负责人，代表企业在x平台全权管理'
      //   },
      // ],
      value: 1,
      labelClassName: "bg-white"
    }
  },
  watch: {
    isDrawer(){

    }
  },
  created(){
    this.token = sessionStorage.getItem('token')
  },
  mounted() {
    this.cashierList();
    // 角色列表
    this.getRoleList();
    this.getGroupList();
  },
  methods: {
    // 收银员列表
    cashierList() {
      let token = sessionStorage.getItem('token');
      apiCashierList(token).then( res => {
        window.console.log('listllllllllllll2222222222222',res)

        if(res.code === 10000) {

          this.cashier_list = res.data.data;
        }
      }).catch( err => {
        window.console.log('listllllllllllll2222222222222')
      })
    },
    // 部门列表、架构
    getGroupList() {
      let token = sessionStorage.getItem('token');
      apiGroupList(token).then( res => {
        if( res.code === 10000) {
          this.data2 = res.data;
        }
        window.console.log('grouppppppp', res)
      })
    },
    // 角色列表
    getRoleList() {
      let token = sessionStorage.getItem('token');
      apiRoleList(token).then( res => {
        window.console.log('jiese,,,,,,', res.data.data)
        this.data1 = res.data.data;
      })
    },
    callback(e) {
      this.tabNum = e;
      window.window.console.log('e',e)
      sessionStorage.setItem('tabNum', e)
    },
    // 接收抽屉关闭的值
    getIsDrawer(data) {
      // window.window.console.log('eeeeee',data)
      this.isDrawer = data
    },
    onChange(e) {
      console.log('radio checked', e.target.value);
    },
    renderContent(h, data) {
      return data.label;
    },
    showModal() {
      this.isAddRole = true
    },
    handleOk(e) {
      window.window.console.log(e);
      this.isAddRole = false
    },
    onExpand(data) {
      alert(123)
      if ("expand" in data) {
        data.expand = !data.expand;
        if (!data.expand && data.children) {
          this.collapse(data.children);
        }
      } else {
        this.$set(data, "expand", true);
      }
    },
    // 点击部门架构节点
    onNodeClick(e) {
      window.window.console.log(e)
      this.isDrawer = !this.isDrawer;
      // if(this.isDrawer) {
      //   this.isDrawer = false;
      // }else{
      //   this.isDrawer = true;
      // }
     
    },
    collapse(list) {
      var _this = this;
      list.forEach(function(child) {
        if (child.expand) {
          child.expand = false;
        }
        child.children && _this.collapse(child.children);
      });
    },
    expandChange() {
      this.toggleExpand(this.data, this.expandAll);
    },
    toggleExpand(data, val) {
      var _this = this;
      if (Array.isArray(data)) {
        data.forEach(function(item) {
          _this.$set(item, "expand", val);
          if (item.children) {
            _this.toggleExpand(item.children, val);
          }
        });
      } else {
        this.$set(data, "expand", val);
        if (data.children) {
          _this.toggleExpand(data.children, val);
        }
      }
    }
  }
};
</script>
<style lang="less" scoped>
// 架构图居中
/deep/ .org-tree {
  margin: 0 auto;
}
/deep/ .bg-white {
  background-color: white;
}
/deep/ .ant-radio {
  width: 100%;
  border:1px solid red;
  position: absolute;
  right: 0;
}
.container {
  color: #333333;
  .page-header {
    font-size: 22px;
  }
  .row {
    margin: 10px 0;
    font-size: 12px;
    color: #666666;
  }
}

.card-info {
  display: flex;
  justify-content: space-between;
}

</style>